<template>
  <div class="routes">
    <Header />
    <div class="page-header">
      <h1>汉中旅游线路推荐</h1>
      <p>精心设计的旅游线路，带您全方位体验汉中的自然与人文魅力</p>
    </div>
    <div class="route-tabs">
      <el-tabs v-model="activeRoute" type="border-card">
        <el-tab-pane label="历史文化之旅" name="culture">
          <el-card shadow="hover" class="route-card">
            <div class="route-header">
              
              <div class="route-info">
                <h2>历史文化之旅</h2>
                <div class="route-meta">
                  <span class="meta-item"><i class="el-icon-clock"></i> 建议游玩：2天</span>
                  <span class="meta-item"><i class="el-icon-map-location"></i> 行程：120公里</span>
                  <span class="meta-item"><i class="el-icon-star"></i> 难度：★★☆☆☆</span>
                </div>
              </div>
            </div>
            <div class="route-content">
              <h3>行程安排</h3>
              <el-timeline>
                <el-timeline-item timestamp="第一天" placement="top">
                  <el-card class="timeline-card">
                    <h4>武侯祠 → 古汉台 → 拜将坛</h4>
                    <p>上午参观全国重点文物保护单位武侯祠，感受三国文化；下午游览古汉台（汉中市博物馆）和拜将坛，了解两汉历史。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="第二天" placement="top">
                  <el-card class="timeline-card">
                    <h4>张良庙 → 张骞纪念馆</h4>
                    <p>上午前往留坝县参观张良庙，感受道教文化与自然景观的结合；下午参观城固县张骞纪念馆，了解丝绸之路开拓者的生平事迹。</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="route-highlights">
                <h3>线路亮点</h3>
                <el-tag type="primary" v-for="(highlight, index) in cultureHighlights" :key="index" class="highlight-tag">{{ highlight }}</el-tag>
              </div>
              <div class="route-recommendation">
                <h3>推荐理由</h3>
                <p>此线路串联汉中最具代表性的历史文化景点，让您深入了解两汉三国文化的深厚底蕴，感受汉中作为历史文化名城的独特魅力。</p>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="自然风光之旅" name="nature">
          <el-card shadow="hover" class="route-card">
            <div class="route-header">
              
              <div class="route-info">
                <h2>自然风光之旅</h2>
                <div class="route-meta">
                  <span class="meta-item"><i class="el-icon-clock"></i> 建议游玩：3天</span>
                  <span class="meta-item"><i class="el-icon-map-location"></i> 行程：280公里</span>
                  <span class="meta-item"><i class="el-icon-star"></i> 难度：★★★☆☆</span>
                </div>
              </div>
            </div>
            <div class="route-content">
              <h3>行程安排</h3>
              <el-timeline>
                <el-timeline-item timestamp="第一天" placement="top">
                  <el-card class="timeline-card">
                    <h4>黎坪国家森林公园</h4>
                    <p>全天游览黎坪国家森林公园，欣赏原始森林、峡谷、瀑布等自然景观，感受大自然的鬼斧神工。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="第二天" placement="top">
                  <el-card class="timeline-card">
                    <h4>华阳古镇 → 长青自然保护区</h4>
                    <p>上午游览华阳古镇，感受明清时期的古镇风貌；下午前往长青自然保护区，观赏珍稀野生动物，体验生态之美。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="第三天" placement="top">
                  <el-card class="timeline-card">
                    <h4>青木川古镇</h4>
                    <p>全天游览青木川古镇，欣赏保存完好的明清古建筑群，感受陕甘川交界处的独特文化氛围。</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="route-highlights">
                <h3>线路亮点</h3>
                <el-tag type="primary" v-for="(highlight, index) in natureHighlights" :key="index" class="highlight-tag">{{ highlight }}</el-tag>
              </div>
              <div class="route-recommendation">
                <h3>推荐理由</h3>
                <p>此线路带您领略汉中秀美的自然风光，从地质奇观到生态保护区，从古村落到原始森林，全方位感受汉中的自然之美。</p>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="美食体验之旅" name="food">
          <el-card shadow="hover" class="route-card">
            <div class="route-header">
              
              <div class="route-info">
                <h2>美食体验之旅</h2>
                <div class="route-meta">
                  <span class="meta-item"><i class="el-icon-clock"></i> 建议游玩：1-2天</span>
                  <span class="meta-item"><i class="el-icon-map-location"></i> 行程：80公里</span>
                  <span class="meta-item"><i class="el-icon-star"></i> 难度：★☆☆☆☆</span>
                </div>
              </div>
            </div>
            <div class="route-content">
              <h3>行程安排</h3>
              <el-timeline>
                <el-timeline-item timestamp="第一天" placement="top">
                  <el-card class="timeline-card">
                    <h4>汉中市区美食探索</h4>
                    <p>上午：前进路小吃街（热面皮、菜豆腐、核桃馍）<br>下午：友爱路美食街（粉皮、浆水面、罐罐茶）<br>晚上：汉江夜市（烤肉、烤鱼、特色烧烤）</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="第二天（可选）" placement="top">
                  <el-card class="timeline-card">
                    <h4>周边县美食之旅</h4>
                    <p>西乡县：牛肉干、松花蛋<br>镇巴县：腊肉、树花菜<br>城固县：上元观红豆腐、柑橘</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="route-highlights">
                <h3>线路亮点</h3>
                <el-tag type="primary" v-for="(highlight, index) in foodHighlights" :key="index" class="highlight-tag">{{ highlight }}</el-tag>
              </div>
              <div class="route-recommendation">
                <h3>推荐理由</h3>
                <p>专为美食爱好者设计的线路，带您品尝汉中各地特色美食，从传统小吃到地方名菜，全方位体验汉中的饮食文化和独特风味。</p>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'Routes',
  components: { Header },
  data() {
    return {
      activeRoute: 'culture',
      cultureHighlights: ['三国文化', '两汉历史', '文物古迹', '名人故里', '文化体验'],
      natureHighlights: ['原始森林', '峡谷奇观', '古镇风貌', '生态保护', '摄影胜地'],
      foodHighlights: ['特色小吃', '地方名菜', '美食街区', '农家体验', '特产选购']
    }
  }
}
</script>

<style scoped>
.routes {
  padding-top: 100px;
}
.page-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}
.route-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}
.route-card {
  border: none;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}
.route-header {
  display: flex;
  margin-bottom: 20px;
}
.route-image {
  width: 300px;
  height: 200px;
  flex-shrink: 0;
}
.route-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.route-info {
  flex-grow: 1;
  padding-left: 20px;
}
.route-info h2 {
  margin: 0 0 15px;
  color: #2c3e50;
}
.route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #606266;
}
.meta-item {
  display: flex;
  align-items: center;
}
.meta-item i {
  margin-right: 5px;
}
.route-content h3 {
  color: #2c3e50;
  margin: 25px 0 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.timeline-card {
  margin-top: 10px;
}
.timeline-card h4 {
  margin: 0 0 10px;
  color: #303133;
}
.timeline-card p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}
.route-highlights {
  margin-bottom: 20px;
}
.highlight-tag {
  margin: 0 8px 8px 0;
}
.route-recommendation p {
  color: #303133;
  line-height: 1.6;
}
</style>